<div id="account_map_import" class="bg-dark-800 p-4 w-96" style="display: none;">
    <div class="flex justify-between mb-2">
        <h3 class="mb-0">{{ _("Import Wallet") }}</h3>
        <p class="m-0 cursor-pointer" onclick="hidePageOverlay()" class="cursor-pointer">Close</p>
    </div>

    <p>Import an existing wallet into Specter by either pasting its data, scanning its QR code or uploading its data file.</p>

    <form action="./import_wallet/" method="POST">
        <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>

        <textarea class="mt-3" id="txt" name="wallet_data" placeholder="Enter your wallet data here"></textarea>

        <div class="popup hidden rounded-md overflow-hidden" id="popup">
            <video muted playsinline id="qr-video"></video>
        </div>

        <div>
            <a class="button w-full mt-3" href="#" id="scanme">
                <img src="{{ url_for('static', filename='img/qr-code.svg') }}">
                {{ _("Scan") }}
            </a>

            <input class="hidden" type="file" id="file" multiple/>
            <label class="button w-full" for="file">
                <img src="{{ url_for('static', filename='img/file.svg') }}">
                {{ _("Choose files") }}
            </label>
        </div>

        <button id="continue-with-wallet-import-btn" class="w-full mt-2 mb-0 mr-0 button bg-accent text-white" type="submit" name="action" value="importwallet">{{ _("Continue") }}</button>
    </form>
</div>


<script type="module">
    import QrScanner from "{{ url_for('static', filename='qr/qr-scanner.min.js') }}";
    document.addEventListener("DOMContentLoaded", function(){
        QrScanner.WORKER_PATH = "{{ url_for('static', filename='qr/qr-scanner-worker.min.js') }}";

        const video = document.getElementById('qr-video');

        const scanner = new QrScanner(video, result => {
            scanner.stop();
            document.getElementById("popup").style.display = 'none';
            let deviceType = document.getElementById("device_type");
            document.getElementById("txt").value = result;
        });

        // This is needed to access the scanner object from outside of the module
        window.scanner = scanner

        document.getElementById("scanme").addEventListener("click", function(){
            try{
                scanner.start();
                document.getElementById("popup").style.display = 'flex';
            }catch(e){
                showError(`{{ _("Can't start the QR scanner!") }}\n\n` + e);
            }
        });

        document.getElementById("popup").addEventListener("click", function(){
            document.getElementById("popup").style.display = 'none';
            scanner.stop();
        });
    });
</script>

<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function(){
        var el = document.getElementById("file");
        const txtTextarea = document.getElementById("txt");

        if (el != null) {
            el.addEventListener("change", (e) => {
                files = e.currentTarget.files;
                console.log(files);
				for(let i=0; i<files.length; i++){
                    console.log(files[i].name);
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        txtTextarea.value = reader.result;
                    }
                    reader.readAsText(files[i]);
                }
            });
        }

        txtTextarea.addEventListener("paste", function (event) {
            event.preventDefault()
            const clipboardData = event.clipboardData || window.clipboardData
            const pastedText = clipboardData.getData("text/plain")
            const cleanedText = pastedText.replace(/("label"\s?:\s?"[^"]*")|\s/g, (_, label) => {
                if (label) {
                    return label.replace(/\n/g, ' ') // Convert newline characters to spaces within labels
                } else {
                    return ''; // Remove whitespace characters otherwise
                }
            })
            txtTextarea.value = cleanedText
        });
    });

    function onCancelOverlay() {
        if (window.scanner) {
            document.getElementById("popup").style.display = 'none';
            window.scanner.stop();
        }
    }

    // Deletes the global scanner property again if there is a reload
    window.addEventListener('unload', () => {
        if (window.scanner) {
            delete window.scanner
        }
    })
</script>
